/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("./spectrum-number-field.css");
@import url("./number-field-overrides.css");

/* sets the missing variables for the width calcs for each size- found in spectrum-number-field.css */
:host,
:host([size="m"]) {
    --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium));
    --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100));
}

:host([size="s"]) {
    --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small));
    --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75));
}

:host([size="l"]) {
    --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-large));
    --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-200));
}

:host([size="xl"]) {
    --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-extra-large));
    --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-300));
}

:host {
    /* TODO: added stepper-button-width multiplied by 2 just to give extra space to the input field.
    That "2" is a magic number and should be removed when we are able (possibly after S2 migration). */
    --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) * 2 + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);

    /* resets the inline-size of sp-number-field to the newly defined stepper-width */
    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
}

:host([hide-stepper]) {
    --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
}

/* keeps the textfield 100% of the width of the sp-number-field so there isn't a gap between the containers */
#textfield {
    inline-size: 100%;
}

.input {
    font-variant-numeric: tabular-nums;
}

:host([readonly]) .buttons {
    pointer-events: none;
    visibility: hidden;
}

:host([readonly]:not([disabled], [invalid], [focused], [keyboard-focused])) #textfield:hover .input {
    border-color: transparent;
}

:host([hide-stepper]:not([quiet])) #textfield input {
    border: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) solid var(--mod-textfield-border-color, var(--spectrum-textfield-border-color));
    border-radius: var(--spectrum-textfield-corner-radius);
}

:host([quiet]) #textfield .button {
    --mod-infield-button-border-color: var(--mod-infield-border-color-quiet, transparent);
    --mod-infield-button-edge-to-fill: 0;
    --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
}

:host([focused]:not([disabled])) #textfield:hover {
    --mod-stepper-buttons-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover));
}

/* visually places the validation icon inside the input field */
:host([invalid]:not([hide-stepper])) #textfield .icon,
:host([valid]:not([hide-stepper])) #textfield .icon {
    inset-inline-end: calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-icon-spacing-inline-end-invalid));
}

/* includes the alert icon size in the input's padding similar to the valid variant */
:host([invalid]) .input {
    padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
}
